
import React, { useState, useEffect, useRef } from "react";
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import gsap from 'gsap'; //动画库
import Stats from 'stats.js'; //性能监控
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'; // FBX 模型加载器
const ThreeTest=()=>{
   const width = useRef(window.innerWidth).current; 
   const height =useRef(window.innerHeight).current;

  //  性能状态监视
   const stats = useRef(new Stats()).current ;
   stats.dom.style.position='absolute'
   stats.dom.style.top='absolute'
  
  

  const scene =useRef(new THREE.Scene()).current ;
  const camera = useRef(new THREE.PerspectiveCamera( 75, width / height, 0.1, 1000 )).current;
  const texture =useRef(new THREE.TextureLoader()).current.load('./logo512.png');
			const renderer =useRef(new THREE.WebGLRenderer({ antialias: true } )).current ;
			renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.setClearColor(0xbfd1e5); //设置颜色及其透明度
      renderer.setPixelRatio(window.devicePixelRatio) //设置设备像素比。通常用于避免HiDPI设备上绘图模糊
      const Controls =useRef(new OrbitControls(camera, renderer.domElement)).current ;
      Controls.enableDamping = true; // 开启阻尼
      Controls.dampingFactor = 0.1; //阻尼惯性
      Controls.minPolarAngle = 0; //轨道控制器直旋转的角度的下限
      Controls.maxPolarAngle = Math.PI / 2; //轨道控制器直旋转的角度的上限 默认是 Math.PI Math.PI / 2
      useEffect(()=>{
        document.body.appendChild(renderer.domElement);
        document.body.appendChild(stats.dom)
        renderer.domElement.addEventListener('click',onClick)
         console.log(width,height)
      },[renderer])
		
      const axesHelper =new THREE.AxesHelper(10)
      scene.add(axesHelper)
      const ambientLight = new THREE.AmbientLight(0xffffff);
      scene.add(ambientLight)
      var material1 = [
				new THREE.MeshLambertMaterial({ color: 4244200, opacity: 1, transparent: true }),
				new THREE.MeshLambertMaterial({ color: 3500454, opacity: 1, transparent: true }),
				new THREE.MeshLambertMaterial({ color: 3757225, opacity: 1, transparent: true}),
				new THREE.MeshLambertMaterial({ color: 9145712, opacity: 1, transparent: true }),
				new THREE.MeshLambertMaterial({ color: 'red', opacity: 1, transparent: true, map: texture  }),
				new THREE.MeshLambertMaterial({ color: 3120771, opacity: 1, transparent: true }),
			
			];
    



			const geometry = new THREE.BoxGeometry( 1, 1, 1 );
			const material = new THREE.MeshBasicMaterial();
			const cube = new THREE.Mesh( geometry, material1 );
			 scene.add( cube );
      const onClick = ()=>{
        // geometry.parameters.width=10
        // cube.scale.x = 5;
        console.log(cube)
        // cube.material[4].opacity =1
        // gsap.to([cube.position], {
          
        //   y: 0.5,
         
        //   duration: 2,
        //   ease: 'power1.inOut',
        // });
        console.log('123123123123',geometry) 
      }
			camera.position.z = 5;

			function animate() {
				requestAnimationFrame( animate );

				// cube.rotation.x += 0.01;
				// cube.rotation.y += 0.01;

				renderer.render( scene, camera );
        Controls.update(); // 开启阻尼
        stats.update() // 性能监测需要 循环调用这个函数
			}

			animate();
   return (<>
   
    
     <div id="id"></div>
   </>)
}

export default ThreeTest